<template>
  <div>
    <div class="wrapper">
      <Anchor :labelList="labels" :labelWidth="85">

        <div id="row-02" class="line">
          <BreakSpace label="项目" :containerStyle="{ marginBottom: '10px' }"></BreakSpace>
          <FilterTable
            ref="table1"
            columnsRef="jzyCardType1"
            :columns="columnsWts"
            :datakey="'records'"
            :params="fetchParams"
            :fetchapi="fetchApi"
            :onColumnsChange="columnsWts => (this.columnsWts = columnsWts)"
            :onSyncTableData="tableHandle"
            :onRowSelectChange="selectChangeHandle"
          >
            <template slot="moreActions">
              <span @click="() => removeRecordHandle('Wts')">删除数据</span>
            </template>
            <template slot="controls">
              <!-- <el-button
                size="small"
                type="primary"
                icon="el-icon-plus"
                @click="() => this.addRecordHandle('Wts')"
              >新建</el-button> -->
            </template>
          </FilterTable>
        </div>
        <div id="row-03" class="line">
          <BreakSpace label="备件信息" :containerStyle="{ marginTop: '10px', marginBottom: '10px' }"></BreakSpace>
          <FilterTable
            ref="table2"
            columnsRef="jzyCardType2"
            selectionType="single"
            :columns="columnsJp1"
            :datakey="'records'"
            :params="fetchParams2"
            :onColumnsChange="columnsJp1 => (this.columnsJp1 = columnsJp1)"
            :onRowSelectChange="selectChangeHandle"
          >
            <template slot="moreActions">
              <span @click="() => removeRecordHandle('Jp')">删除数据</span>
            </template>
            <template slot="controls">
              <!-- <el-button
                size="small"
                type="primary"
                icon="el-icon-plus"
                @click="() => this.addRecordHandle('Jp')"
              >新建</el-button> -->
            </template>
          </FilterTable>
        </div>

        <div id="row-04" class="line">
          <BreakSpace label="建议项目" :containerStyle="{ marginTop: '10px', marginBottom: '10px' }"></BreakSpace>
          <FilterTable
            ref="table2"
            columnsRef="jzyCardType2"
            selectionType="single"
            :columns="columnsJp2"
            :datakey="'records'"
            :params="fetchParams2"
            :onColumnsChange="columnsJp2 => (this.columnsJp2 = columnsJp2)"
            :onRowSelectChange="selectChangeHandle"
          >
            <template slot="moreActions">
              <span @click="() => removeRecordHandle('Jp')">删除数据</span>
            </template>
            <template slot="controls">
              <!-- <el-button
                size="small"
                type="primary"
                icon="el-icon-plus"
                @click="() => this.addRecordHandle('Jp')"
              >新建</el-button> -->
            </template>
          </FilterTable>
        </div>


        <div id="row-05" class="line">
          <BreakSpace label="前台领料" :containerStyle="{ marginTop: '10px', marginBottom: '10px' }"></BreakSpace>
          <FilterTable
            ref="table2"
            columnsRef="jzyCardType2"
            selectionType="single"
            :columns="columnsJp3"
            :datakey="'records'"
            :params="fetchParams2"
            :onColumnsChange="columnsJp3 => (this.columnsJp3 = columnsJp3)"
            :onRowSelectChange="selectChangeHandle"
          >
            <template slot="moreActions">
              <span @click="() => removeRecordHandle('Jp')">删除数据</span>
            </template>
            <template slot="controls">
              <!-- <el-button
                size="small"
                type="primary"
                icon="el-icon-plus"
                @click="() => this.addRecordHandle('Jp')"
              >新建</el-button> -->
            </template>
          </FilterTable>
        </div>
        <div id="row-01" class="line">
          <FormPanel ref="formPanel1" columnsRef="lhmApplyPanl1" :list="formList1" :cols="3" labelWidth="100" formType="add" :isSubmitBtn="false" />
        </div>
      </Anchor>
    </div>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <el-button @click="closeHandler">关 闭</el-button>

    </div>
  </div>
</template>

<script>
  // 数据字典/按钮权限
  import { dictionary } from '@/utils/dictMixin';
  import { authority } from '@/utils/authMixin';
  import { notifyAction } from '@/utils';


  import { excuteCardInfo, getWtsList, getJpList, selectSPJ,getContractakingMethod } from '@/api/claimManagement/business/administration';


  export default {
    name: '',
    mixins: [dictionary, authority],
    props: {
      type: {
        type: String
      },
      wts: {
        type: String
      },
      formData: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        fetchApi: selectSPJ,
        labels: this.createAnchorLabels(),
        fetchParams: {
          // 初始化查询参数
          wts: this.wts
        },
        formList1: this.createFormList1(),
        columnsWts: this.createTableColums([]),
        columnsJp1: this.createTableColums2([]),
        columnsJp2: this.createTableColums3([]),
        columnsJp3: this.createTableColums4([])

      };
    },
    created() {
      // 页面加载走的方法
      alert('wts' + wts);
    },
    mounted() {
      // 获取 Table 组件对象
      // alert('wts:' + wts);
      // this.$tableWts = this.$refs.table1.$refs.pageTable;
      // this.$tableJp = this.$refs.table2.$refs.pageTable;

    },
    methods: {
      createAnchorLabels() {
        return [
        ]
      },
      createTableColums(colunms) {
        return [
          {
            title: '序号',
            dataIndex: 'index',
            width: 70,
            sorter: true,
            render: props => {
              return <span>{props.row.index + 1}</span>;
            }
          },
          ...colunms,
          {
            title: '项目代码',
            dataIndex: 'vitem',
            sorter: true,
            filter: true,
            filterType: 'input'
          },
          {
            title: '项目名称',
            dataIndex: 'vitemName',
            sorter: true,
            filter: true,
            filterType: 'input'
          },
          // 表tt_wr_claim_orderh 备注
          {
            title: '项目附加说明',
            dataIndex: 'cgwfjsm',
            sorter: true,
            filter: true,
            filterType: 'input'
          },
          // {
          //   title: '项目属性',
          //   dataIndex: '',
          //   sorter: true,
          //   filter: true,
          //   filterType: 'input'
          // },
          {
            title: '服务包代码',
            dataIndex: 'packageItemId',
            sorter: true,
            filter: true,
            filterType: 'input'
          },
          {
            title: '性质',
            dataIndex: 'vProperties',
            sorter: true,
            filter: true,
            filterType: 'input'
          },
          {
            title: '工时优惠率',
            dataIndex: 'nManhaurDisrate',
            sorter: true,
            filter: true,
            filterType: 'input'
          },
          {
            title: '工时',
            dataIndex: 'vstationhour',
            sorter: true,
            filter: true,
            filterType: 'input'
          },
          {
            title: '工时费',
            dataIndex: 'labourAmount',
            sorter: true,
            filter: true,
            filterType: 'input'
          },
          {
            title: '班组名称',
            dataIndex: 'workgroupName',
            sorter: true,
            filter: true,
            filterType: 'input'
          },
          {
            title: '主修人',
            dataIndex: 'vMajor',
            sorter: true,
            filter: true,
            filterType: 'input'
          },
          {
            title: '开始时间',
            dataIndex: 'dBegin',
            sorter: true,
            filter: true,
            filterType: 'DATE'
          },
          {
            title: '派工时间',
            dataIndex: 'assignTime',
            sorter: true,
            filter: true,
            filterType: 'DATE'
          },
          {
            title: '完工时间',
            dataIndex: 'itemEndTime',
            sorter: true,
            filter: true,
            filterType: 'DATE'
          },
          {
            title: '有效时间',
            dataIndex: 'effectiveTime',
            sorter: true,
            filter: true,
            filterType: 'DATE'
          },
          {
            title: '追加项目',
            dataIndex: 'addTag',
            sorter: true,
            filter: true,
            filterType: 'input'
          },
          // {
          //   title: '返工',
          //   dataIndex: 'vMajor',
          //   sorter: true,
          //   filter: true,
          //   filterType: 'input'
          // },
          // {
          //   title: '跨期',
          //   dataIndex: 'vMajor',
          //   sorter: true,
          //   filter: true,
          //   filterType: 'input'
          // },

          {
            title: '备注',
            dataIndex: 'vremark',
            sorter: true,
            filter: true,
            filterType: 'input'
          }
        ];
      },
      createTableColums2(colunms) {
        return [
          {
            title: '序号',
            dataIndex: 'index',
            width: 70,
            sorter: true,
            render: props => {
              return <span>{props.row.index + 1}</span>;
            }
          },
          ...colunms,
          {
            title: '备件代码',
            dataIndex: 'partNo',
            sorter: true,
            filter: true,
            filterType: 'input'
          },
          {
            title: '备件名称',
            dataIndex: 'partName',
            sorter: true,
            filter: true,
            filterType: 'input'
          },
          // {
          //   title: '备件别名',
          //   dataIndex: 'vitem',
          //   sorter: true,
          //   filter: true,
          //   filterType: 'input'
          // },
          {
            title: '服务包代码',
            dataIndex: 'packageItemId',
            sorter: true,
            filter: true,
            filterType: 'input'
          },

          {
            title: '出库类型',
            dataIndex: 'deliveryType',
            sorter: true,
            filter: true,
            filterType: 'input'
          },
          {
            title: '优惠率',
            dataIndex: 'preRate',
            sorter: true,
            filter: true,
            filterType: 'input'
          },
          {
            title: '领料人',
            dataIndex: 'receiver',
            sorter: true,
            filter: true,
            filterType: 'input'
          },
          {
            title: '出库单价',
            dataIndex: 'zckdj',
            sorter: true,
            filter: true,
            filterType: 'input'
          },
          {
            title: '出库数量',
            dataIndex: 'outQuantity',
            sorter: true,
            filter: true,
            filterType: 'input'
          },
          {
            title: '已退数量',
            dataIndex: 'nReturnQty',
            sorter: true,
            filter: true,
            filterType: 'input'
          },
          {
            title: '数量',
            dataIndex: 'nqty',
            sorter: true,
            filter: true,
            filterType: 'input'
          },
          // {
          //   title: '合计金额',
          //   dataIndex: 'p',
          //   sorter: true,
          //   filter: true,
          //   filterType: 'input'
          // },
          {
            title: '入出库单编号',
            dataIndex: 'a',
            sorter: true,
            filter: true,
            filterType: 'input'
          },
          {
            title: '领料方式',
            dataIndex: 'pickType',
            sorter: true,
            filter: true,
            filterType: 'input'
          }


        ];
      },
      createTableColums3(colunms) {
        return [
          {
            title: '序号',
            dataIndex: 'index',
            width: 70,
            sorter: true,
            render: props => {
              return <span>{props.row.index + 1}</span>;
            }
          },

          {
            title: '建议委托书',
            dataIndex: 'nsvcbillid',
            sorter: true,
            filter: true,
            filterType: 'input'
          },
          {
            title: '项目代码',
            dataIndex: 'vitem',
            sorter: true,
            filter: true,
            filterType: 'input'
          },
          {
            title: '项目名称',
            dataIndex: 'vitemName',
            sorter: true,
            filter: true,
            filterType: 'input'
          },
          {
            title: '工时费',
            dataIndex: 'labourAmount',
            sorter: true,
            filter: true,
            filterType: 'input'
          },
          {
            title: '工时',
            dataIndex: 'vstationhour',
            sorter: true,
            filter: true,
            filterType: 'input'
          },
          // {
          //   title: '转入维修',
          //   dataIndex: 'j',
          //   sorter: true,
          //   filter: true,
          //   filterType: 'input'
          // },
          // {
          //   title: '转入维修委托书',
          //   dataIndex: 'k',
          //   sorter: true,
          //   filter: true,
          //   filterType: 'input'
          // },
          {
            title: '操作员代码',
            dataIndex: 'makingPersonCode',
            sorter: true,
            filter: true,
            filterType: 'input'
          }

        ];

      },
      createTableColums4(colunms) {
        return [
          {
            title: '序号',
            dataIndex: 'index',
            width: 70,
            sorter: true,
            render: props => {
              return <span>{props.row.index + 1}</span>;
            }
          },
          {
            title: '前台领料领料方式',
            dataIndex: 'pickType',
            sorter: true,
            filter: true,
            filterType: 'input'
          },
          {
            title: '备件代码',
            dataIndex: 'partNo',
            sorter: true,
            filter: true,
            filterType: 'input'
          },
          {
            title: '备件名称',
            dataIndex: 'partName',
            sorter: true,
            filter: true,
            filterType: 'input'
          },
          // {
          //   title: '备件别名',
          //   dataIndex: 'c',
          //   sorter: true,
          //   filter: true,
          //   filterType: 'input'
          // },
          {
            title: '数量',
            dataIndex: 'partQuantity',
            sorter: true,
            filter: true,
            filterType: 'input'
          },
          // {
          //   title: '单价',
          //   dataIndex: 'b',
          //   sorter: true,
          //   filter: true,
          //   filterType: 'input'
          // },
          // {
          //   title: '金额',
          //   dataIndex: 'n',
          //   sorter: true,
          //   filter: true,
          //   filterType: 'input'
          // }
        ];
      },
      createFormList1() {
        return [
          // {
          //   type: 'SELECT',
          //   label: '包工方式',
          //   fieldName: '',
          //   request: {
          //     fetchApi: getContractakingMethod,
          //     params: {},
          //     datakey: '',
          //     valueKey: '',
          //     textKey: ''
          //   }
          // }
          // {
          //   type: 'INPUT',
          //   label: '优惠后工时费',
          //   fieldName: '',
          //   disabled: true,
          //   rules: [{ required: true, message: '请输入...', trigger: 'blur' }]
          // },
          // {
          //   type: 'INPUT',
          //   label: '优惠后材料费',
          //   fieldName: '',
          //   disabled: true,
          //   rules: [{ required: true, message: '请输入...', trigger: 'blur' }]
          // },
          // {
          //   type: 'INPUT',
          //   label: '工料费合计',
          //   fieldName: '',
          //   disabled: true,
          //   rules: [{ required: true, message: '请输入...', trigger: 'blur' }]
          // },
          // {
          //   type: 'INPUT',
          //   label: '优惠后供料费合计',
          //   fieldName: '',
          //   disabled: true,
          //   rules: [{ required: true, message: '请输入...', trigger: 'blur' }]
          // },
          // {
          //   type: 'INPUT',
          //   label: '累计维修金额',
          //   fieldName: '',
          //   disabled: true,
          //   rules: [{ required: true, message: '请输入...', trigger: 'blur' }]
          // },
          // {
          //   type: 'INPUT',
          //   label: '累计维修次数',
          //   fieldName: '',
          //   disabled: true,
          //   rules: [{ required: true, message: '请输入...', trigger: 'blur' }]
          // },
        ];
      },
      // table动态回调函数
      tableHandle(val) {
        this.tableData = val;
      },


      // table 组件新增行
      addRecordHandle(type) {
        this[`$table${type}`] && this[`$table${type}`].EXECUTE_INSERT({});
      },
      // table 组件移除记录
      removeRecordHandle(type) {
        this[`$table${type}`] && this[`$table${type}`].EXECUTE_DELETE();
      },
      // async getWtsInfo(val) {
      //   alert("1")
      //   this.$tableWts.START_LOADING();
      //   // ajax
      //   //const res = await getWtsList( val );

      //   if (res.resultCode === 200) {
      //     //this.listWts = res.data || [];
      //     this.listWts = res.data.records || [];
      //   }
      //    console.log("listWts:",this.listWts)
      //   this.$tableWts.STOP_LOADING();
      // },
      // 行选中状态变化时的回调
      selectChangeHandle(val) {
        this.multipleTable3 = val; //  this.multipleTable 选中的值
        alert(val.id);
      },
      // async getJpInfo(id) {
      //   this.$tableJp.START_LOADING();
      //   // ajax
      //   //const res = await getJpList({ id });
      //   if (res.resultCode === 200) {
      //     this.listJp = res.data || [];
      //   }
      //   this.$tableJp.STOP_LOADING();
      // },
      async saveHandler() {
        alert(JSON.stringify(this.multipleTable3));
        this.$emit('setCustomer7', this.multipleTable3);
      },
      // 关闭面板
      closeHandler(type) {
        this.$emit('cancelWWGW', false);
        // this.$emit('close', false, type);
      }
    }
  };
</script>

<style lang="less" scoped>
  .wrapper {
    height: calc(100vh - 135px);
  }
</style>
